<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>葫芦侠</title>

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/plateMainPage.css">
</head>

<body>

    <!-- 头部 -->
    <header>

        <!-- - 左边 -->
        <div class='left'>
            <a href="" class="back">
                <i></i>
            </a>
            <a href="" class="toggle">
                <span>外面帖子板块名称（技术分享）</span>
            </a>
        </div>

        <!-- - 右边 -->
        <div class='right'>
            <a class="massage" href=""></a>
        </div>

    </header>

    <div class="wrap">

        <div class="title">
            <h4>羊了个羊 自写h5(羊了没) 并非原源码</h4> <i></i>
        </div>

        <div class="date">22年09月27日</div>

        <div class="details">

            <!-- - 左边 -->
            <div class='left'>
                <div class="seek">10745</div>
                <div class="msg">51</div>
                <div class="praise">11</div>
            </div>

            <!-- - 右边 -->
            <div class='right'>
                <a href="">技术分享</a>
            </div>

        </div>

        <div class="poster">

            <div class="box">

                <!-- - 左边 -->
                <div class='left'>

                    <!-- - 图片 -->
                    <div class='icon'><img src='./imgs/five.jpg' alt=''></div>

                    <div class="name-sex">
                        <p class="name">骠戈</p>
                        <p class="sex"><span><em></em> 20</span></p>
                    </div>

                </div>

                <!-- - 右边 -->
                <div class='right'><span>楼主</span></div>

            </div>

        </div>

        <div class="post-content">

            <div class="text-img">

                <div class="text">
                    <p>

                        拿走请说谢谢，制作不易，要不是我这项目我拿不到钱，我才懒分享。蓝奏云链接:
                        1.sheep.zip 大小16.5mb https://zmxy.lanzouv.com/iGxgF0cfbpkj
                        2.葫芦侠.zip 大小 8.2mb https://zmxy.lanzouv.com/iS9es0cfbpla

                        压缩包里有:
                        1.项目进度90%视频演示(录屏时鼠标有问题)
                        2.前期实现过程图片以及分析的教程图
                        3.imgs目录和iconfont目录以及
                        4.ico网页图片，我用的葫芦侠的图标
                        5.葫芦侠html静态页面(前些天我老师布置网页作业，自找app模范移动端页面，我看葫芦侠没移动端，我写了五个页面作为作业完成，分别是:首页->社区->发现->空间->登录页)

                        今晚本来是在手机查看html的，可惜手机自带web查看工具不给力，没js引擎，页面看不到。

                        本来是想做这个项目向老师申请拿钱的，可惜我被老师忽悠了，哪有这回事，我就当作学习了吧，无所谓。

                        今天下午本来想搭建网站的，借了朋友宝塔和域名，结果域名过期了，我去阿里云买了一个别人的域名，2-3天才可以申请自己的备案，通过备案也要大概15天，我人麻了。

                        当前项目进度90%
                        已完成功能:
                        [灯泡]1.层叠问题点击后与撤回后，层附近变化方块层叠问题(上层盖住下层切视觉效果完美提现)
                        [灯泡]2.完全随机问题，随机位置，随机层数，随机卡牌种类(可以调难度与出现的卡牌数)
                        [灯泡]3.卡牌用的阿里巴巴字体图标(卡哇伊的那种)
                        [灯泡]4.入场时卡牌由上至下盖下动画(视觉盛宴)
                        [灯泡]5.点击是滑动至结果栏(看起来生动)
                        [灯泡]6.计算可撤回步骤，就回到上一步(无限撤回，无法撤回时按钮变灰)
                        [灯泡]7.计算复活通道可放置多少卡牌，暂缓区至多放置7个卡牌(无限放置次数，暂无法放置时按钮变灰)
                        [灯泡]8.渲染页面使用代理拦截，无需每次都渲染全部页面。(对象嵌proxy对象，一个卡牌对应一个proxy对象)
                        [灯泡]9.音频播放和背景小草从小图随机插在屏幕内，按钮dj效果和小草从小图dj效果，播放音乐时才触发，没有播放时静态。(小草和按钮跟着dj摇摆)
                        [灯泡]10.按钮伪防抖触发(事件时限结束前不可再次触发，有效防止用户狂点)

                        性能优化上面以我的水平做到了极致。

                        10%暂未完成功能:
                        [心碎]1.头部的层数导航器，横向滚轮多按钮(层数)，点击查看对应的层看卡牌。实现未仆先知功能，有点游戏体验感。
                        [心碎]2.详情按钮，类似清单和日志一样，用于用户清楚还剩多少卡牌信息，层数信息，以及想要知道的卡牌信息的位置和剩余个数。

                        用到的技术:
                        1.for，forin，forEach，while，dowhile。
                        2.封装函数，递归方法，回调函数。
                        3.数组操作，splice，push，concat，every，some，findIndex
                        4.proxy拦截
                        5.css3的transform过度效果和animation动画帧以及jq的webkitTransformEnd时间监听动画结束。
                        6.暂时想到这么多，本来想搞异步promise的，不知道会不会再优化优化一点

                    </p>
                </div>

                <div class="imgs">
                    <div class="img"><img src="./imgs/banner-img.png" alt=""></div>
                    <div class="img"><img src="./imgs/five.jpg" alt=""></div>
                    <div class="img"><img src="./imgs/five.jpg" alt=""></div>
                </div>

            </div>

            <div class="exceptional">

                <!-- - 左边 -->
                <div class='left'>

                    <div class="sum">

                        <!-- - 图片 -->
                        <div class='icon'><img src='./imgs/exceptional-icon.png' alt=''><span>+5</span></div>

                    </div>

                    <div class="users">

                        <!-- - 图片 -->
                        <div class='icon'><img src='./imgs/five.jpg' alt=''><span>5</span></div>

                        <!-- - 图片 -->
                        <div class='icon'><img src='./imgs/five.jpg' alt=''><span>5</span></div>

                        <!-- - 图片 -->
                        <div class='icon'><img src='./imgs/five.jpg' alt=''><span>5</span></div>

                        <!-- - 图片 -->
                        <div class='icon'><img src='./imgs/five.jpg' alt=''><span>5</span></div>

                        <!-- - 图片 -->
                        <div class='icon'><img src='./imgs/five.jpg' alt=''><span>5</span></div>

                        <!-- - 图片 -->
                        <div class='icon'><img src='./imgs/five.jpg' alt=''><span>5</span></div>

                        <!-- - 图片 -->
                        <div class='icon'><img src='./imgs/five.jpg' alt=''><span>5</span></div>

                        <!-- - 图片 -->
                        <div class='icon'><img src='./imgs/five.jpg' alt=''><span>5</span></div>

                        <!-- - 图片 -->
                        <div class='icon'><img src='./imgs/five.jpg' alt=''><span>5</span></div>

                        <!-- - 图片 -->
                        <div class='icon'><img src='./imgs/five.jpg' alt=''><span>5</span></div>

                        <!-- - 图片 -->
                        <div class='icon'><img src='./imgs/five.jpg' alt=''><span>5</span></div>

                        <!-- - 图片 -->
                        <div class='icon'><img src='./imgs/five.jpg' alt=''><span>5</span></div>

                        <!-- - 图片 -->
                        <div class='icon'><img src='./imgs/five.jpg' alt=''><span>5</span></div>

                    </div>

                </div>

                <!-- - 右边 -->
                <div class='right'><i></i></div>


            </div>

        </div>

        <div class="comments">

            <div class="head">
                <h4>评论 51</h4>
            </div>

            <div class="body">

                <div class="msg-publish">

                    <!-- - 图片 -->
                    <div class='icon'><img src='./imgs/five.jpg' alt=''></div>

                    <div class="text">

                        <div class="msg-title"><span>欧系阿瓦达</span><small>115楼</small></div>

                        <div class="age"><i></i> <span>0</span></div>

                        <div class="time">20年08月11日</div>

                        <div class="content text-ellipsis-10">链接没了。。。</div>



                    </div>

                </div>

                <div class="msg-publish msg-reply">

                    <!-- - 图片 -->
                    <div class='icon'><img src='./imgs/five.jpg' alt=''></div>

                    <div class="text">

                        <div class="msg-title"><span>欧系阿瓦达</span><small>115楼</small></div>

                        <div class="age"><i></i> <span>0</span></div>

                        <div class="time">20年08月11日</div>

                        <div class="reply">
                            <h5>回复我的话题</h5>
                            <p><span class="text-ellipsis-10">
                                    .enter-box .text</span> </p>
                        </div>

                        <div class="content text-ellipsis-10">链接没了。。。</div>



                    </div>

                </div>

                <div class="msg-publish">

                    <!-- - 图片 -->
                    <div class='icon'><img src='./imgs/five.jpg' alt=''></div>

                    <div class="text">

                        <div class="msg-title"><span>欧系阿瓦达</span><small>115楼</small></div>

                        <div class="age"><i></i> <span>0</span></div>

                        <div class="time">20年08月11日</div>

                        <div class="content text-ellipsis-10">链接没了。。。</div>



                    </div>

                </div>



            </div>

        </div>

        <div class="nav">

            <div class='left'>
                <a class="model" href=""></a>
                <a class="like" href=""></a>
                <a class="praise" href=""></a>
            </div>

            <div class="middle">
                <a class="prev" href=""></a>
                <p><span>1</span>/3</p>
                <a class="next con" href=""></a>
            </div>

            <div class='right'>
                <a href="">我也来评论</a>
            </div>

        </div>

    </div>



</body>

</html>